$black = #000
$accent_color = #566FCF
$danger_color = $red_7

// @todo colors indices should represent different shades (see other colors below)
// opacity should be applied in place, not in definition
$black_2 = rgba($black, 0.02)
$black_10 = rgba($black, 0.1)
$black_15 = rgba($black, 0.15)
$black_20 = rgba($black, 0.20)
$black_40 = rgba($black, 0.40)

$red_1 = #FFF1F0
$red_7 = #CF1322
$red_10 = #5C0011

$grey_1 = #FFFFFF
$grey_2 = #FAFAFA
$grey_3 = #F5F5F5
$grey_5 = #D9D9D9
$grey_6 = #BFBFBF
$grey_7 = #8C8C8C
$grey_8 = #595959
$grey_10 = #262626
$grey_13 = #000000

$green_4 = #95DE64
$green_6 = #52C41A

@font-face {
  font-family: "Figtree";
  src: url("/static/fonts/Figtree-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("/static/fonts/Figtree-SemiBold.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

body
  font-family: 'Figtree', sans-serif !important; 

  --sand_900: #12110D;
  --sand_800: #262522;
  --sand_700: #45433E;
  --sand_600: #6B6860;
  --sand_500: #A49F95;
  --sand_400: #CAC5B8;
  --sand_300: #E1DED5;
  --sand_200: #F0EFEB;
  --sand_100: #F9F8F6;
  --sand_0: #FDFDFC;

  --grape_0: #F0F3FE;
  --grape_100: #D4DBFB; 
  --grape_500: #566FCF;
  --grape_600: #576CC1;
  --grape_700: #4C5FA9;
  --grape_800: #37447A;

  --kale_0: #F4F9F9;
  --kale_400: #57B7AB;

  --plum_500: #CC6FBE;
  --plum_400: #E37BD3;
  --plum_100: #F7D6F2;
  --plum_0: #FBF2FC;

  --persimmon_300: #FF9F89;
  --persimmon_400: #FF7557;

  --canteloupe_0: #FFF6EF;
  --canteloupe_100: #FFE4D0;
  --canteloupe_400: #FFA663;
  --canteloupe_500: #E69559;
  --canteloupe_600: #CC854F;
  --canteloupe_700: #B37445;

  --red_1: #FFF1F0;
  --red_3: #FFCCC7;
  --red_7: #CF1322;
  --red_10: #5C0011;

  --primary_link: #566FCF;
  --danger_color: var(--red_7);